<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计时器</title>
    <style>
        :root {
            --primary: #3498db;
            --secondary: #2980b9;
            --accent: #e74c3c;
            --dark: #2c3e50;
            --light: #ecf0f1;
            --shadow: rgba(0, 0, 0, 0.1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--dark);
        }
        
        .container {
            width: 90%;
            max-width: 600px;
            background-color: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px var(--shadow);
            overflow: hidden;
        }
        
        .tabs {
            display: flex;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }
        
        .tab {
            flex: 1;
            padding: 20px;
            text-align: center;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            background-color: var(--light);
        }
        
        .tab.active {
            background-color: white;
            border-bottom: 3px solid var(--primary);
            color: var(--primary);
        }
        
        .content {
            padding: 30px;
            text-align: center;
        }
        
        .display {
            font-size: 4rem;
            font-weight: 700;
            margin: 20px 0;
            color: var(--dark);
            font-variant-numeric: tabular-nums;
            letter-spacing: 2px;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 30px;
        }
        
        button {
            padding: 12px 25px;
            border: none;
            border-radius: 50px;
            background-color: var(--primary);
            color: white;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
        }
        
        button:hover {
            background-color: var(--secondary);
            transform: translateY(-2px);
        }
        
        button.danger {
            background-color: var(--accent);
            box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
        }
        
        button.danger:hover {
            background-color: #c0392b;
        }
        
        .input-group {
            margin: 20px 0;
            display: flex;
            justify-content: center;
            gap: 10px;
        }
        
        .input-group input {
            width: 70px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            text-align: center;
            font-size: 1.2rem;
        }
        
        label {
            display: block;
            font-size: 0.8rem;
            margin-top: 5px;
            color: #7f8c8d;
        }
        
        .laps {
            margin-top: 20px;
            max-height: 200px;
            overflow-y: auto;
            border-top: 1px solid #eee;
            padding-top: 10px;
        }
        
        .lap-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 15px;
            border-bottom: 1px solid #f5f5f5;
        }
        
        .lap-item:nth-child(odd) {
            background-color: #f9f9f9;
        }
        
        /* 添加倒计时结束特效样式 */
        @keyframes endingEffect {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.8; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        .ending-effect {
            animation: endingEffect 0.5s ease-in-out 3;
        }
        
        .timer-complete {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        
        .timer-complete.show {
            opacity: 1;
            pointer-events: auto;
        }
        
        .timer-complete-content {
            background-color: white;
            padding: 30px 50px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            transform: translateY(20px);
            transition: transform 0.3s ease;
        }
        
        .timer-complete.show .timer-complete-content {
            transform: translateY(0);
        }
        
        .timer-complete h2 {
            font-size: 2rem;
            margin-bottom: 20px;
            color: var(--accent);
        }
        
        .timer-complete button {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="tabs">
            <div class="tab active" id="countdown-tab">倒计时</div>
            <div class="tab" id="stopwatch-tab">秒表</div>
        </div>
        
        <div class="content">
            <!-- Countdown Timer -->
            <div id="countdown-content">
                <h2>倒计时</h2>
                <div class="input-group">
                    <div>
                        <input type="number" id="hours" min="0" max="99" value="0">
                        <label>小时</label>
                    </div>
                    <div>
                        <input type="number" id="minutes" min="0" max="59" value="0">
                        <label>分钟</label>
                    </div>
                    <div>
                        <input type="number" id="seconds" min="0" max="59" value="0">
                        <label>秒</label>
                    </div>
                </div>
                <div class="display" id="countdown-display">00:00:00</div>
                <div class="controls">
                    <button id="start-countdown">开始</button>
                    <button id="pause-countdown">暂停</button>
                    <button id="reset-countdown" class="danger">重置</button>
                </div>
            </div>
            
            <!-- Stopwatch -->
            <div id="stopwatch-content" style="display: none;">
                <h2>秒表</h2>
                <div class="display" id="stopwatch-display">00:00:00</div>
                <div class="controls">
                    <button id="start-stopwatch">开始</button>
                    <button id="pause-stopwatch">暂停</button>
                    <button id="lap-stopwatch">计圈</button>
                    <button id="reset-stopwatch" class="danger">重置</button>
                </div>
                <div class="laps" id="laps-container"></div>
            </div>
        </div>
    </div>
    
    <!-- 添加倒计时结束提示框 -->
    <div class="timer-complete" id="timer-complete">
        <div class="timer-complete-content">
            <h2>时间到！</h2>
            <p>您设置的倒计时已结束</p>
            <button id="close-notification">关闭</button>
        </div>
    </div>
    
    <script>
        // Tab switching
        const countdownTab = document.getElementById('countdown-tab');
        const stopwatchTab = document.getElementById('stopwatch-tab');
        const countdownContent = document.getElementById('countdown-content');
        const stopwatchContent = document.getElementById('stopwatch-content');
        
        countdownTab.addEventListener('click', () => {
            countdownTab.classList.add('active');
            stopwatchTab.classList.remove('active');
            countdownContent.style.display = 'block';
            stopwatchContent.style.display = 'none';
        });
        
        stopwatchTab.addEventListener('click', () => {
            stopwatchTab.classList.add('active');
            countdownTab.classList.remove('active');
            stopwatchContent.style.display = 'block';
            countdownContent.style.display = 'none';
        });
        
        // Countdown Timer
        const hoursInput = document.getElementById('hours');
        const minutesInput = document.getElementById('minutes');
        const secondsInput = document.getElementById('seconds');
        const countdownDisplay = document.getElementById('countdown-display');
        const startCountdownBtn = document.getElementById('start-countdown');
        const pauseCountdownBtn = document.getElementById('pause-countdown');
        const resetCountdownBtn = document.getElementById('reset-countdown');
        
        let countdownInterval;
        let countdownRunning = false;
        let countdownTotalSeconds = 0;
        
        function updateCountdownDisplay(totalSeconds) {
            const hours = Math.floor(totalSeconds / 3600);
            const minutes = Math.floor((totalSeconds % 3600) / 60);
            const seconds = totalSeconds % 60;
            
            countdownDisplay.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }
        
        startCountdownBtn.addEventListener('click', () => {
            if (!countdownRunning) {
                if (countdownTotalSeconds === 0) {
                    // Get values from inputs
                    const hours = parseInt(hoursInput.value) || 0;
                    const minutes = parseInt(minutesInput.value) || 0;
                    const seconds = parseInt(secondsInput.value) || 0;
                    
                    countdownTotalSeconds = hours * 3600 + minutes * 60 + seconds;
                    
                    if (countdownTotalSeconds === 0) {
                        return; // Don't start if no time is set
                    }
                }
                
                countdownRunning = true;
                
                countdownInterval = setInterval(() => {
                    if (countdownTotalSeconds > 0) {
                        countdownTotalSeconds--;
                        updateCountdownDisplay(countdownTotalSeconds);
                    } else {
                        clearInterval(countdownInterval);
                        countdownRunning = false;
                        
                        // 倒计时结束特效和音效
                        countdownDisplay.classList.add('ending-effect');
                        
                        // 播放音效
                        const audio = new Audio('sounds/timer-end.mp3');
                        audio.play().catch(e => console.error('音频播放失败:', e));
                        
                        // 显示结束提示框
                        const timerComplete = document.getElementById('timer-complete');
                        timerComplete.classList.add('show');
                        
                        // 定时移除特效
                        setTimeout(() => {
                            countdownDisplay.classList.remove('ending-effect');
                        }, 2000);
                    }
                }, 1000);
            }
        });
        
        pauseCountdownBtn.addEventListener('click', () => {
            if (countdownRunning) {
                clearInterval(countdownInterval);
                countdownRunning = false;
            }
        });
        
        resetCountdownBtn.addEventListener('click', () => {
            clearInterval(countdownInterval);
            countdownRunning = false;
            countdownTotalSeconds = 0;
            hoursInput.value = 0;
            minutesInput.value = 0;
            secondsInput.value = 0;
            updateCountdownDisplay(0);
            countdownDisplay.classList.remove('ending-effect');
        });
        
        // 关闭倒计时结束提示框
        document.getElementById('close-notification').addEventListener('click', () => {
            document.getElementById('timer-complete').classList.remove('show');
        });
        
        // Stopwatch
        const stopwatchDisplay = document.getElementById('stopwatch-display');
        const startStopwatchBtn = document.getElementById('start-stopwatch');
        const pauseStopwatchBtn = document.getElementById('pause-stopwatch');
        const lapStopwatchBtn = document.getElementById('lap-stopwatch');
        const resetStopwatchBtn = document.getElementById('reset-stopwatch');
        const lapsContainer = document.getElementById('laps-container');
        
        let stopwatchInterval;
        let stopwatchRunning = false;
        let stopwatchSeconds = 0;
        let lapCount = 0;
        
        function updateStopwatchDisplay(totalSeconds) {
            const hours = Math.floor(totalSeconds / 3600);
            const minutes = Math.floor((totalSeconds % 3600) / 60);
            const seconds = Math.floor(totalSeconds % 60);
            const milliseconds = Math.floor((totalSeconds % 1) * 100);
            
            stopwatchDisplay.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }
        
        startStopwatchBtn.addEventListener('click', () => {
            if (!stopwatchRunning) {
                stopwatchRunning = true;
                const startTime = Date.now() - (stopwatchSeconds * 1000);
                
                stopwatchInterval = setInterval(() => {
                    stopwatchSeconds = (Date.now() - startTime) / 1000;
                    updateStopwatchDisplay(stopwatchSeconds);
                }, 10);
            }
        });
        
        pauseStopwatchBtn.addEventListener('click', () => {
            if (stopwatchRunning) {
                clearInterval(stopwatchInterval);
                stopwatchRunning = false;
            }
        });
        
        lapStopwatchBtn.addEventListener('click', () => {
            if (stopwatchRunning) {
                lapCount++;
                const lapItem = document.createElement('div');
                lapItem.className = 'lap-item';
                
                const hours = Math.floor(stopwatchSeconds / 3600);
                const minutes = Math.floor((stopwatchSeconds % 3600) / 60);
                const seconds = Math.floor(stopwatchSeconds % 60);
                const milliseconds = Math.floor((stopwatchSeconds % 1) * 100);
                
                lapItem.innerHTML = `
                    <span>计圈 ${lapCount}</span>
                    <span>${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>
                `;
                
                lapsContainer.insertBefore(lapItem, lapsContainer.firstChild);
            }
        });
        
        resetStopwatchBtn.addEventListener('click', () => {
            clearInterval(stopwatchInterval);
            stopwatchRunning = false;
            stopwatchSeconds = 0;
            lapCount = 0;
            updateStopwatchDisplay(0);
            lapsContainer.innerHTML = '';
        });
    </script>
</body>
</html>